import { observer } from 'mobx-react-lite'
import { Pressable, StyleSheet, Text } from 'react-native'
import { common } from '../../assets/style/common'

export default observer(function VideoFocus() {
  return (
    <Pressable style={[style.focusBtn, common.flexCol]}>
      <Text style={style.focusIcon}>&#xe617;</Text>
      <Text style={style.focus}>关注</Text>
    </Pressable>
  )
})

const style = StyleSheet.create({
  focusIcon: {
    fontFamily: 'iconfont',
    fontSize: 13,
    color: '#fff',
    transform: [{ rotateZ: '45deg' }],
  },
  focus: {
    fontSize: 14,
    color: '#fff',
    paddingLeft: 2,
  },
  focusBtn: {
    paddingHorizontal: 4,
    paddingVertical: 2,
    borderRadius: 2,
    backgroundColor: '#f392a6',
  },
})
